<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>echarts中国地图</title>
    <script src="js/jquery.js"></script>
    <script src="js/echarts4.0.4.js"></script>
    <script src="js/charts-component.js"></script>
    <script src="js/china.js"></script>
    <style>
        *{margin:0px;padding:0px;}
        html,body{width:100%;height:100%;background:#202751;}
        .centerItem{width:30%;height:40%;margin:2% 1.5%;float:left;}
    </style>
</head>
<body>
    <div id="chart1" class="centerItem"></div>
    <div id="chart2" class="centerItem"></div>
    <div id="chart3" class="centerItem"></div>
    <div id="chart6" class="centerItem"></div>
    <div id="chart9" class="centerItem"></div>
    <script>
        $(function(){

            var XAData = [
                [{name:'西安'}, {name:'北京',child:[{name:"班线客运",value:50},{name:"旅游包车",value:40},{name:"危险品运输",value:20}]}],
                [{name:'西安'}, {name:'上海',child:[{name:"班线客运",value:50},{name:"旅游包车",value:40},{name:"危险品运输",value:20}]}],
                [{name:'西安'}, {name:'广州',child:[{name:"班线客运",value:50},{name:"旅游包车",value:40},{name:"危险品运输",value:20}]}],
                [{name:'西安'}, {name:'西宁',child:[{name:"班线客运",value:50},{name:"旅游包车",value:40},{name:"危险品运输",value:20}]}],
                [{name:'西安'}, {name:'银川',child:[{name:"班线客运",value:50},{name:"旅游包车",value:40},{name:"危险品运输",value:20}]}]
            ];
            charts.map("chart1",XAData);

            var XAData1 = [
                [{name:'北京'}, {name:'西安',child:[{name:"班线客运",value:50},{name:"旅游包车",value:40},{name:"危险品运输",value:20}]}],
                [{name:'上海'}, {name:'西安',child:[{name:"班线客运",value:50},{name:"旅游包车",value:40},{name:"危险品运输",value:20}]}],
                [{name:'广州'}, {name:'西安',child:[{name:"班线客运",value:50},{name:"旅游包车",value:40},{name:"危险品运输",value:20}]}],
                [{name:'西宁'}, {name:'西安',child:[{name:"班线客运",value:50},{name:"旅游包车",value:40},{name:"危险品运输",value:20}]}],
                [{name:'银川'}, {name:'西安',child:[{name:"班线客运",value:50},{name:"旅游包车",value:40},{name:"危险品运输",value:20}]}]
            ];
            charts.map("chart2",XAData1);

            //饼图
            var dataRound=['煤炭开采和洗选业', '石油和天然气开采业','其他'];
            var roundData=[],dataRoundNum=[],tround;
            for(var i=0;i<dataRound.length;i++){
                tround=Math.floor(5+Math.random()*10/2)*200;
                dataRoundNum.push(tround);
                roundData.push({value:dataRoundNum[i],name:dataRound[i]});
            }
            roundData[0].selected=true;
            charts.pies("chart6",dataRound,roundData,"circle","#fff");
            // 线图
            var chartName9=["同比","环比"];
            var chartsxAxis9=["1月","2月","3月","4月","5月","6月","7月","8月"];
            var color9=[['rgba(195,84,254,1)','rgba(195,84,254,0)'],['rgba(37,334,194,1)','rgba(37,334,194,0)']]
            var chartCount9=[],tline9;
            for(var i=0;i<chartName9.length;i++){
                chartCount9[i]=[];
                for(var j=0;j<chartsxAxis9.length;j++){
                    tline9=Math.floor(5+Math.random()*10/2)*1000;
                    chartCount9[i].push(tline9);
                }
            }
            charts.LinesArea("chart9",chartName9,chartsxAxis9,chartCount9,color9,"万");

            //陕西地图
            charts.creatMap("chart3")
            
        })
    </script>
</body>
</html>
